<template>
  <div>
    <div class="contain">
      <van-image
        width="64px"
        height="64px"
        fit="cover"
        round
        :src="userInfo.photo"
      />
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#3196fa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <van-row type="flex" justify="space-around" class="user-nav">
      <van-col span="6">
        <van-icon name="newspaper-o" color="#7fbbfe" />
        <br />
        我的作品
      </van-col>
      <van-col span="6">
        <van-icon name="star-o" color="#ff5c5c" />
        <br />
        我的收藏
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" color="#ffb978" />
        <br />
        阅读历史
      </van-col>
    </van-row>
    <van-cell-group>
      <van-cell icon="edit" to="/edit" title="编辑资料" is-link />
      <van-cell icon="chat-o" to="/students" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="warning-o" title="退出登录" @click="outClick" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { userInfo } from "./user.js";
import { removeToken } from "@/utils/token.js";
export default {
  name: "user",
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    userInfo().then(res => {
      // console.log(res);
      this.userInfo = res.data.data;
      this.$store.commit("update", res.data.data);
    });
  },
  methods: {
    outClick() {
      this.$dialog
        .confirm({
          title: "友情提示",
          message: "您真的要退出吗？"
        })
        .then(() => {
          // on confirm
          removeToken();
          this.userInfo = {};
          this.$router.push({ path: "/" });
        });
    }
  }
};
</script>

<style lang="less">
.contain {
  height: 100px;
  background-color: #3196fa;
  display: flex;
  align-items: center;
  .van-image {
    padding: 0 15px;
  }
  h2 {
    font-size: 18px;
    font-weight: normal;
  }
}
.user-nav {
  font-size: 16px;
  text-align: center;
  padding: 15px 0;
  .van-icon {
    font-size: 24px;
    margin-bottom: 8px;
  }
}
</style>
